{% extends "navigate.html" %} {% block mainbody %}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>                         
    <script src="/static/js/echarts.js"></script>
    
</head>
<title>关系</title>
<div class="container">
    <div class="row">
    <!--head start-->
    <div class="col-md-12">
        <h3 class="page-header"><i class="fa fa-link" aria-hidden="true"></i> 关系查询 </h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="\">主页</a></li>
                <li><i class="fa fa-link" aria-hidden="true"></i>关系查询</li>
            </ol>
    </div>
    
    <div class = "col-md-12">
    	<div class = "panel panel-default">
			<header class="panel-heading">
            查询条件：
       		</header>
       		<div class = "panel-body">

			    <form  id ="searchRelationForm" class="form-inline" style="padding-left: 10% ; padding-right: 10%" method="get">
			    	<div id = "entity1" class="form-group" style="padding: 2%">
			        	<input type="text" id = "entity1_text" name = "entity1_text" class ="form-control" placeholder="实体１" aria-describedby="basic-addon1">
			 		</div>
			 		<!--dropdown combobox start-->
			        <div class="btn-group" style="padding: 2%" > <a class="btn btn-default dropdown-toggle btn-select form-control" data-toggle="dropdown" id="btnCountry">关系类型<span class="caret"></span></a>
			            <ul class="dropdown-menu">
			                <li><a href="#">subbank</a></li>
			                <li class="divider"></li>
			                <li><a href="#"><span class="glyphicon glyphicon-star"></span>其他</a></li>
			            </ul>
			        </div>
			        <!--dropdown combobox end-->
			        <div id = "relation_name" class = "form-group hide" style="padding: 2%">
			        	 <input type="text" id = "relation_name_input" name = "relation_name_text" class ="form-control" placeholder="输入关系名称" aria-describedby="basic-addon1">
			        </div>
			        <div id = "entity2" class = "form-group" style="padding: 2%">
			        	 <input type="text" id = "entity2_text" name = "entity2_text" class ="form-control" placeholder="实体２" aria-describedby="basic-addon1">
			        </div>
			        <div class="btn-group" style="padding: 2%">
			            <button type="button" id="btnSearch" class="btn btn-primary" onclick = "document.getElementById('searchRelationForm').submit();">Search</button>
			        </div>
				</form>
			</div>
		</div>
	</div>
	{% if ctx %}
	<div class = "col-md-12">
		<div class = "panel panel-default">
			<header class = "panel-heading">
				查询结果：
			</header>
			<div class = "panel-body">
				<div style="padding: 2%">
					<h2>暂未找到相应的匹配</h2>
				</div>
			</div>
		</div>
	</div>
	{% endif %}

    {% if searchResult %}

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class = "col-md-12">
        <div class="panel panel-default ">
	        <header class="panel-heading">
	            关系图 :
	        </header>
            <div class = "panel-body ">
                <div id="graph" style="width: 100%;height:600px;"></div>
            </div>
        </div>
    </div>
    <!-- Footable -->
    <div class = "col-md-12">
	    <div class="panel panel-default">
	    	<header class="panel-heading">
	       	 关系列表 :
	   		</header>
	        <div class = "panel-body">
	            <table class = "table" data-paging =  "true" data-sorting="true"></table>
	        </div>
	    </div>
	</div>
    {% endif %}

</div>
<script src="/static/js/jquery-1.8.3.min.js"></script>
{% if searchResult %}
<script type="text/javascript">
	var searchResult = {{searchResult|safe}}
	//用表格列出所有的关系
    tableData = []
    for (var i = 0 ; i < searchResult.length ; i++){
        relationData = {} ;
        relationData['entity1'] = searchResult[i]['n1']['name'];
        relationData['relation'] = searchResult[i]['rel']['type'] ;
        relationData['entity2'] = searchResult[i]['n2']['name'] ;
        tableData.push(relationData) ;
    }
    jQuery(function(){
        $('.table').footable({
        "columns": [{"name":"entity1",title:"Entity1"} ,
                  {"name":"relation",title:"Relation"},
                  {"name":"entity2",title:"Entity2"}],
        "rows": tableData
        });
    });

    //echarts 数据
    var data = [] ;
    var links = [] ;	

    //构造展示的数据
    var maxDisPlayNode = 15 ;
    var id = 0 ; 
    for( var i = 0 ;id < Math.min(maxDisPlayNode,searchResult.length) && i<searchResult.length ; i++ ){
        //获取node1
        node1 = {} ;
        node1['name'] = searchResult[i]['n1']['name'] ;
        node1['draggable'] = true ;
        if('url' in searchResult[i]['n1']){
            node1['category'] = 1 ;
        }
        else{
            node1['category'] = 2 ;
        }
        var flag = 1 ;

        relationTarget = id.toString() ;
        for(var j = 0 ; j<data.length ;j++){
        	if(data[j]['name'] === node1['name']){
        		flag = 0 ;
        		relationTarget = data[j]['id'] ;
        		break ;
        	}
        }

        node1['id'] = relationTarget ; 
        if(flag === 1){
        	id++ ;
        	data.push(node1) ;
        }

        //获取node2
        node2 = {} ;
        node2['name'] = searchResult[i]['n2']['name'] ;
        node2['draggable'] = true ;
        if('url' in searchResult[i]['n2']){
            node2['category'] = 1 ;
        }
        else{
            node2['category'] = 2 ;
        }
        flag = 1 ;
        relationTarget = id.toString() ;
        for(var j = 0 ; j<data.length ;j++){
        	if(data[j]['name'] === node2['name']){
        		flag = 0 ;
        		relationTarget = data[j]['id'] ;
        		break ;
        	}
        }
        node2['id'] = relationTarget ; 
        if(flag === 1){
        	id++ ;
        	data.push(node2) ;
        }

        //获取relation
        relation = {}
        relation['source'] = node1['id'];
        relation['target'] = node2['id'] ;
        relation['category'] = 0 ;  
        flag = 1;  
        for(var j = 0 ;j<links.length;j++){
        	if(links[j]['source'] == relation['source'] && links[j]['target'] == relation['target']){
        		links[j]['value'] = links[j]['value'] + searchResult[i]['rel']['type'] ;
        		flag = 0 ;
        		break ;
        	}
        }           
        if(flag === 1){
        	relation['value'] = searchResult[i]['rel']['type'] ;
        	relation['symbolSize'] = 10;
        	links.push(relation) ;
        }

    }

     // Echarts初始化设置
    var myChart = echarts.init(document.getElementById('graph'));
    
    option = {
	    title: {
	        text: ''
	    },
	    tooltip: {},
	    animationDurationUpdate: 1500,
	    animationEasingUpdate: 'quinticInOut',
	    label: {
	        normal: {
	            show: true,
	            textStyle: {
	                fontSize: 12
	            },
	        }
	    },
	    legend: {
	        x: "center",
	        show: false
	    },
	    series: [

	        {
	            type: 'graph',
	            layout: 'force',
	            symbolSize: 45,
	            focusNodeAdjacency: true,
	            roam: true,
	            edgeSymbol: ['none', 'arrow'],
	            categories: [{
	                name: '查询实体',
	                itemStyle: {
	                    normal: {
	                        color: "#009800",
	                    }
	                }
	            }, {
	                name: 'Bank',
	                itemStyle: {
	                    normal: {
	                        color: "#4592FF",
	                    }
	                }
	            }, {
	                name: 'Serise',
	                itemStyle: {
	                    normal: {
	                        color: "#C71585",
	                    }
	                }
	            }],
	            label: {
	                normal: {
	                    show: true,
	                    textStyle: {
	                        fontSize: 12,
	                    },
	                }
	            },
	            force: {
	                repulsion: 1000
	            },
	            edgeSymbolSize: [4, 50],
	            edgeLabel: {
	                normal: {
	                    show: true,
	                    textStyle: {
	                        fontSize: 10
	                    },
	                    formatter: "{c}"
	                }
	            },
	            data: data,
	            links: links,
	            lineStyle: {
	                normal: {
	                    opacity: 0.9,
	                    width: 1.3,
	                    curveness: 0,
	                    color:"#262626",
	                }
	            }
	        }
	    ]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);

</script>
{% endif %}
<script>
	$(".dropdown-menu li a").click(function(){
	   var selText = $(this).text();
	   $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
	   if(selText.trim()!="Other"){
	   	$("#relation_name_input").val(selText.trim()) ;
	   }
	   //combobox behavior
	   if (selText.trim()==="Other") {
	       $("#relation_name").removeClass("hide");
	   }
	   else{
	   	   $("#relation_name").addClass("hide");
	   }
	  
	});
</script>
{% endblock %}
